<!-- MyHeader-->
<template>
  <div>
    <el-input v-model="input" placeholder="请输入内容，按回车确认。" @keyup.enter.native="add"></el-input>
  </div>
</template>
 
<script>
// 引入 nanoid
import { nanoid } from 'nanoid'

export default {
  name: 'MyHeader',
  data(){
    return {
      input: ''
    }
  },
  props: ['addTodo'],
  methods: {
    add(){
      // 校验数据
      if(!this.input.trim()) return alert('输入不能为空')
      // 封装成一个对象
      const todoObj = {id: nanoid(), title: this.input, done: false, isEdit: false}
      // 调用receive 方法，将todoObj 传递给App
      this.addTodo(todoObj)
      // 清空输入
      this.input = ''
    }
  }
}
</script>

<style scoped>
  div {
    margin-bottom: 10px;
  }
</style>